<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    ul,
    li {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    div {
      margin: 0 auto;
      width: 700px;
    }

    li.company {
      font-size: 2em;
      font-weight: bold;
    }

    ul.workspaces li {
      padding: 5px;
      margin: 8px;
      border: 1px solid #777;
      border-radius: 4px;
    }

    ul.workspaces img {
      width: 32px;
      height: 32px;
      vertical-align: middle;
      padding-right: 8px;
    }

    a {
      color: #333;
    }
  </style>
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <div id="c"></div>
  <script src="./companies.js"></script>
  <script>
    /*
    练习目的：数量使用数组的map方法和字符串模版
    将companies数据转换为指定的html然后显示
    数据和模版见下面的代码
  */
    /*
  转换完的html如下
  <ul>
    <!-- 一个公司的模版 -->
    <li class='company'><a href="company?id=4">公司名</a></li>
    <ul class='workspaces'>
      <!-- 一个工作区的模版 -->
      <li>
        <img
          src="https://hb-v4-public-img.huoban.com/space_cover/48279911/0"
          width='80'
        />
        <a href="space?id=1539064">工作区（workspace)名</a>
      </li>
      <!-- 一个工作区模版 结束 -->
    </ul>
    <!-- 一个公司模版 结束 -->
    <!-- 下面以此类推列出所有的数据 -->
  </ul>
  */

    function companyList(companies) {
      /*你的代码*/
      return companies
        .map(function (v) {
          return `  <ul>
      <!-- 一个公司的模版 -->
      <li class='company'><a href="company?id=${v.id}">${v.name}</a></li>
      <ul class='workspaces'>
        <!-- 一个工作区的模版 -->
       ${v.spaces
              .map(function (item) {
                return ` <li>
          <img
            src="${item.image}"
            width='80'
          />
          <a href="space?id=${item.id}">${item.name}</a>
        </li>`;
              })
              .join("")}
        <!-- 一个工作区模版 结束 -->
      </ul>
      <!-- 一个公司模版 结束 -->
      <!-- 下面以此类推列出所有的数据 -->
    </ul>`;
        })
        .join("");
    }
    // 注意：companies数据见同目录下的companies.js
    document.getElementById("c").innerHTML = companyList(companies);
  </script>
</body>

</html>